<template>
  <div class="footer width_100">
    <div class="footerbox width_100 height_100">
      <div class="endbtn flex-center cp" @click="endConference">结束会议</div>
      <ul class="operation">
        <li
          :class="[
            cf_mute_all && !tools.conference.isHost(tools.getUserId())
              ? 'na'
              : ''
          ]"
          @click="operateVoiced"
        >
          <img
            v-if="cf_mute_all && !tools.conference.isHost(tools.getUserId())"
            src="@/assets/cfRoom/images/offAudioGrey.png"
            alt=""
          />
          <img
            v-else
            :src="
              conferenceSettings.voiced
                ? require('@/assets/cfRoom/images/onAudio.png')
                : require('@/assets/cfRoom/images/offAudio.png')
            "
            alt=""
          />
          <span>{{
            (cf_mute_all && !tools.conference.isHost(tools.getUserId())) ||
            !conferenceSettings.voiced
              ? "取消静音"
              : "静音"
          }}</span>
        </li>
        <li @click="operateCamera">
          <img
            :src="
              conferenceSettings.camera
                ? require('@/assets/cfRoom/images/onVideo.png')
                : require('@/assets/cfRoom/images/offVideo.png')
            "
            alt=""
          />
          <span>{{ conferenceSettings.camera ? "关闭视频" : "打开视频" }}</span>
        </li>
        <li @click="viewMessage">
          <img src="@/assets/cfRoom/images/message.png" alt="" />
          <span>聊天</span>
        </li>
        <li @click="viewFiles">
          <img
            src="@/assets/cfRoom/images/wordFiles.png"
            alt=""
          />
          <span>会议文档</span>
        </li>
        <li tabindex="402" @focus.stop="showInvitSelection = true" @blur.stop="showInvitSelection = false">
          <img
            :src="
              cf_isLocked && !tools.conference.isHost(tools.getUserId())
                ? require('@/assets/cfRoom/images/offInvitation.png')
                : require('@/assets/cfRoom/images/invitation.png')
            "
            alt=""
          />
          <span>邀请</span>
          <div class="invitSelect" v-if="showInvitSelection">
            <div class="option" @click="invitateMember">添加参会人</div>
            <div class="option" v-if="false" @click="invitate">复制邀请链接</div>
          </div>
        </li>

        <li @click="setting">
          <img src="@/assets/cfRoom/images/setting.png" alt="" />
          <span>会议设置</span>
        </li>
      </ul>
    </div>
    <setting-dialog
      v-if="showSetBox"
      @closeSetting="closeSetting"
    ></setting-dialog>
    <file-dialog
      v-if="showfileBox"
      @closeMaxDialogBox="closeFileBox"
      :cf_id="$store.state.conferenceRoom.cf_id"
    ></file-dialog>
    <invitate-dialog
      v-if="showInvitateBox"
      @closeInvitate="closeInvitate"
    ></invitate-dialog>
    <end-dialog v-if="showEndBox" @closeEndDialog="cancelEnd"></end-dialog>
    <message-dialog
      v-if="showMsgBox"
      @closeMsgDialog="closeMsgDialog"
    ></message-dialog>
    <add-group-dialog ref="addCfMember"></add-group-dialog>
    <exit-dialog></exit-dialog>
  </div>
</template>

<script>
import settingDialog from '../components/roomDialog/settingDialog'
import invitateDialog from '../components/roomDialog/invitateDialog'
import endDialog from '../components/roomDialog/endDialog'
import exitDialog from './roomDialog/notification'
import messageDialog from '../components/roomDialog/messageDialog'
import addGroupDialog from '@/components/searchBox/components/addGroupDialog'
import { sendSock } from '../../../utils/socketSend'

export default {
  components: {
    settingDialog,
    invitateDialog,
    endDialog,
    exitDialog,
    messageDialog,
    addGroupDialog
  },
  data () {
    return {
      showSetBox: false, // 展示设置框
      showfileBox: false, // 展示文件框
      showInvitateBox: false, // 展示邀请框
      showMsgBox: false, // 展示聊天框
      showEndBox: false, // 展示退出会议框
      showInvitSelection: false // 展示邀请的选择列表
    }
  },
  computed: {
    // 会议设置
    conferenceSettings () {
      return this.$store.state.conferenceRoom.conferenceSettings
    },
    // 是否开启全体静音
    cf_mute_all () {
      return this.$store.state.conferenceRoom.cf_mute_all
    },
    // 会议是否已锁定
    cf_isLocked () {
      return this.$store.state.conferenceRoom.cf_isLocked
    }
  },
  methods: {
    endConference () {
      this.showEndBox = true
    },
    cancelEnd () {
      this.showEndBox = false
    },
    // 静音/取消静音
    operateVoiced () {
      if (
        !this.cf_mute_all ||
        this.tools.conference.isHost(this.tools.getUserId())
      ) {
        sendSock({
          type: '4.1.20',
          body: {
            cf_id: this.$store.state.conferenceRoom.cf_id,
            cf_operation: !this.conferenceSettings.voiced
          }
        })
      }
    },
    // 打开/关闭摄像头
    operateCamera () {
      sendSock({
        type: '4.1.22',
        body: {
          cf_id: this.$store.state.conferenceRoom.cf_id,
          cf_operation: !this.conferenceSettings.camera
        }
      })
    },
    // 打开聊天框
    viewMessage () {
      this.showMsgBox = true
    },
    closeMsgDialog () {
      this.showMsgBox = false
    },
    invitate () {
      this.showInvitSelection = false
      this.showInvitateBox = true
    },
    invitateMember () {
      this.showInvitSelection = false
      // 显示添加参会人的弹框
      this.$store.commit('groups/set_selectedList', [])
      this.$store.commit('groups/set_addType', 4)
      this.$refs.addCfMember.toggleShow()
    },
    closeInvitate () {
      this.showInvitateBox = false
    },
    viewFiles () {
      this.showfileBox = true
    },
    closeFileBox () {
      this.showfileBox = false
    },
    setting () {
      this.showSetBox = true
      this.midbox = {
        title: '设置'
      }
    },
    closeSetting () {
      this.showSetBox = false
      this.midbox = {}
    }
  },
  created () {}
}
</script>

<style lang="scss" scoped>
.footer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 72px;
  background: #0c172f;
  .footerbox {
    position: relative;
    .endbtn {
      position: absolute;
      left: 18px;
      top: 50%;
      transform: translateY(-50%);
      width: 108px;
      height: 42px;
      background: #ff2929;
      border-radius: 5px;
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #ffffff;
    }
    .operation {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      height: 100%;
      padding: 4px 0;
      li {
        width: 100px;
        cursor: pointer;
        position: relative;
        float: left;
        display: flex;
        height: 64px;
        outline: none;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        &:hover {
          background: rgba(246, 247, 251, 0.09);
          border-radius: 4px;
        }
        img {
          width: 32px;
          height: 32px;
          cursor: pointer;
        }
        span {
          height: 20px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #ffffff;
          line-height: 20px;
          letter-spacing: 1px;
        }
        &:nth-child(1) {
          margin-left: 0;
        }
        .invitSelect{
          padding: 4px;
          width: 128px;
          background: #ffffff;
          border-radius: 4px;
          box-shadow: 0px 2px 4px 0px #273553;
          position: absolute;
          top: -60px;
          left: 50%;
          transform: translateX(-50%);
          .option{
            width: 120px;
            height: 36px;
            font-size: 12px;
            font-family: PingFangSC, PingFangSC-Regular;
            text-align: center;
            color: #273553;
            line-height: 36px;
            &:hover{
              background: rgba(48,78,236,0.05);
            }
          }
        }
      }
    }
  }
}
</style>
